<template>
    <div class="modal-button">
        <button @click="open = true">打开全屏的弹窗</button>
    </div>
    <teleport to='body'>
        <transition enter-active-class="animate__slideInLeft animate__fast" leave-active-class="animate__slideOutLeft">
            <div class="full-modal animate__animated" v-if='open'></div>
        </transition>
    </teleport>
</template>

<script>
import { test, requestInfo } from '../../utils/util';
import { ref, watch } from 'vue';

const frozenData = {
    name: 'dwx'
};
Object.preventExtensions(frozenData);

export default {
    name: 'modal-button',
    props: {
        userAge: {
            type: Number,
            default: 1
        }
    },
    // 引入ref，将普通属性变成响应式属性
    setup (props, context) {
        const userInfo = ref({});
        return {
            userInfo
        }
    },
    data () {
        return {
            menu: frozenData,
            open: false
        }
    },
    mounted () {
        setTimeout(() => {
            this.menu.name = 'oyyy';
            console.log(this.userInfo, this.menu);
        }, 4000);
    }
}
</script>

<style lang="less">
    .full-modal {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: lightblue;
        // position: abs();
    }
</style>